<template>
	<view>
		<view class="pages">
			<view class="head">
				<view class="title">房间位置（位置名称101室）</view>
				<view class="boxes">
					<view class="uniBtn b1">
						<view class="b1-1">
							<view>套餐名称</view>
							<view>08-29</view>
							<view>18:00~22:00</view>
						</view>
						<image class="b1-2" src="https://z1.ax1x.com/2023/09/14/pPRjGAf.png" mode=""></image>
					</view>
					<view class="b2">房间信息</view>
					<view class="b3 uniCenter"><text>门锁密码</text><text>789321</text></view>
				</view>
				<view class="base">
					<view class="bs1">订单信息</view>
					
					<view class="bs2">
						<text>实付金额：</text>
						<text>￥199.00</text>
					</view>
					<view class="bs2">
						<text>订单号码：</text>
						<text>32596575876</text>
					</view>
					<view class="bs2">
						<text>下单时间：</text>
						<text>2023-08-29 16:08:15</text>
					</view>
					<view class="bs2">
						<text>支付方式：</text>
						<text>已付款</text>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
			}
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#E2867E'
			})
			this.id = options.id;
		},
		methods: {

		}
	}
</script>

<style scoped lang="less">
	.pages {
		background: url('https://z1.ax1x.com/2023/09/14/pPR7xYj.png') no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 900rpx;

		.head {
			padding: 30rpx 26rpx;

			.title {
				background-color: #FF685B;
				border-radius: 10rpx;
				padding: 30rpx 26rpx;
				color: #fff;
				font-weight: bold;
				font-size: 30rpx;
			}

			.boxes {
				background: url('https://z1.ax1x.com/2023/09/18/pP4C7E4.png') no-repeat;
				background-size: 100% 100%;
				width: 700rpx;
				height: 560rpx;

				.b1 {
					padding: 35rpx 20rpx 35rpx 40rpx;

					.b1-1 {
						view {
							&:nth-child(1) {
								font-size: 36rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #080808;
								margin-bottom: 10rpx;
							}

							&:nth-child(2) {
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #6F6F6F;
							}

							&:nth-child(3) {
								font-size: 30rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #000000;
								line-height: 60rpx;
							}
						}
					}

					.b1-2 {
						width: 180rpx;
						height: 200rpx;
						border-radius: 5rpx;
					}
				}
			
				.b2{
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					margin: 15rpx 40rpx 70rpx 40rpx;
					border-top: 1px solid #eee;
					padding-top: 48rpx;
				}
				
				.b3{
					text-align: center;
					text{
						&:nth-child(1){
							font-size: 32rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #000000;
							margin-right: 26rpx;
						}
						&:nth-child(2){
							font-size: 40rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #000000;
							line-height: 36rpx;
						}
					}
				}
			}
		
			.base{
				background-color: #fff;
				border-radius: 15rpx;
				background-color: #fff;
				padding: 30rpx 40rpx;
				margin-top: 30rpx;
				
				.bs1{
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #000000;
					line-height: 180%;
				}
				.bs2{
					margin: 15rpx 0;
					
					text{
						&:nth-child(1){
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #6F6F6F;
						}
						&:nth-child(2){
							font-size: 30rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #000000;
						}
					}
				}
			}
		}
	}
</style>